<template>
    <div class='view-container'>
    <ion-row class="app-layoutpanel">
        <div v-show="detailsModel.container1.visible" class="app-layoutpanel-container" style="width:100%;">
            <div style="height:100%;display: flex;justify-content: space-between;">
                <div v-show="detailsModel.container2.visible" class="app-layoutpanel-container container-border" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;border-color:rgba(235, 223, 223, 1);border-style:solid;border-width:1px 1px 1px 1px">
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            <img src="assets/images/shanghusum.svg">
                        
                        
                        
                        
                        </div>
                        
                        <div v-show="detailsModel.merchantcnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.merchantcnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            商户总数
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
                <div v-show="detailsModel.container3.visible" class="app-layoutpanel-container container-border" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;border-color:rgba(235, 223, 223, 1);border-style:solid;border-width:1px 1px 1px 1px">
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            <img  src="assets/images/dingdansum.svg">
                        
                        
                        
                        
                        </div>
                        
                        <div v-show="detailsModel.ordercnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.ordercnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            订单总数
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
                <div v-show="detailsModel.container4.visible" class="app-layoutpanel-container container-border" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;border-color:rgba(235, 223, 223, 1);border-style:solid;border-width:1px 1px 1px 1px">
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            <img src="assets/images/wanchengdingdansum.svg">
                        
                        
                        
                        
                        </div>
                        
                        <div v-show="detailsModel.compordercnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.compordercnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            已完成订单
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="detailsModel.container5.visible" class="app-layoutpanel-container container-box-shadow" style="width:100%;">
            <div style="height:100%;display: flex;justify-content: space-between;">
                <div v-show="detailsModel.container6.visible" class="app-layoutpanel-container" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <div v-show="detailsModel.campcnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.campcnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            营地总数
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
                <div v-show="detailsModel.container7.visible" class="app-layoutpanel-container" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <div v-show="detailsModel.shopcnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.shopcnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            商家总数
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
                <div v-show="detailsModel.container8.visible" class="app-layoutpanel-container" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <div v-show="detailsModel.experpointcnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.experpointcnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            体验点总数
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
                <div v-show="detailsModel.container9.visible" class="app-layoutpanel-container" style="width:100%;">
                    <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        
                        <div v-show="detailsModel.selfpersoncnt.visible" style="text-align:center" class="app-layoutpanel-field  text-center-mob">
                            <div class="item-field ">
                            
                            <app-mob-span  :context="context" :value="data.selfpersoncnt" :itemParam="{}"  ></app-mob-span>
                        </div>
                        
                        
                        </div>
                        
                        <div style="" class="app-layoutpanel-rowitem">
                            个体户总数
                        
                        
                        
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ion-row>
</div>
</template>
<script lang='ts'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { Subject, Subscription } from 'rxjs';
import { ControlInterface } from '@/interface/control';
import GlobalUiService from '@/global-ui-service/global-ui-service';
import Town_infoEntityService from '@/app-core/service/town-info/town-info-service';
import BusinessSituationService from '@/app-core/ctrl-service/town-info/business-situation-panel-service';
import AppCenterService from "@/ibiz-core/app-service/app/app-center-service";

import Town_infoUIService from '@/ui-service/town-info/town-info-ui-action';

import { PanelUserControlModel, PanelButtonModel, PanelControlModel, PanelFieldModel, PanelRawitemModel, PanelContainerModel } from '@/model/panel-detail';


@Component({
    components: { }
})
export default class BusinessSituationBase extends Vue implements ControlInterface {

    /**
     * 名称
     *
     * @type {string}
     * @memberof BusinessSituation
     */
    @Prop() protected name?: string;

    /**
     * 视图名称
     *
     * @type {string}
     * @memberof BusinessSituation
     */
    @Prop() protected viewName!: string;


    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof BusinessSituation
     */
    @Prop() protected viewState!: Subject<ViewState>;

    /**
     * 应用上下文
     *
     * @type {*}
     * @memberof BusinessSituation
     */
    @Prop({ default: {} }) protected context?: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof BusinessSituation
     */
    @Prop({ default: {} }) protected viewparams?: any;

    /**
     * 视图状态事件
     *
     * @protected
     * @type {(Subscription | undefined)}
     * @memberof BusinessSituation
     */
    protected viewStateEvent: Subscription | undefined;

    /**
     * 获取部件类型
     *
     * @returns {string}
     * @memberof BusinessSituation
     */
    protected getControlType(): string {
        return 'PANEL'
    }

    /**
     * 全局 ui 服务
     *
     * @type {GlobalUiService}
     * @memberof BusinessSituation
     */
    protected globaluiservice: GlobalUiService = new GlobalUiService();


    /**
     * 转化数据
     *
     * @param {any} args
     * @memberof  BusinessSituationBase
     */
    public transformData(args: any) {
        let _this: any = this;
        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
            return _this.service.handleRequestData('transform',_this.context,args);
        }
    }

    /**
     * 建构部件服务对象
     *
     * @type {BusinessSituationService}
     * @memberof BusinessSituation
     */
    protected service: BusinessSituationService = new BusinessSituationService({$store:this.$store});

    /**
     * 实体服务对象
     *
     * @type {Town_infoService}
     * @memberof BusinessSituation
     */
    protected appEntityService: Town_infoEntityService = new Town_infoEntityService();

    /**
     * 界面UI服务对象
     *
     * @type {Town_infoUIService}
     * @memberof BusinessSituationBase
     */  
    public deUIService:Town_infoUIService = new Town_infoUIService(this.$store);
    

    /**
     * 关闭视图
     *
     * @param {any[]} args
     * @memberof BusinessSituation
     */
    protected closeView(args: any[]): void {
        let _this: any = this;
        _this.$emit('closeview', args);
    }
    

   /**
     * 生命周期
     *
     *  @memberof BusinessSituation
     */  
    created(){
        this.afterCreated();
    }
   /**
     * 执行created后的逻辑
     *
     *  @memberof BusinessSituation
     */  
    afterCreated(){
        if(this.item){
            this.data = this.item;
            this.panelLogic({ name: '', newVal: null, oldVal: null });
            this.computeButtonState();
            return;
        }
       if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                if (Object.is('load', action)) {
                    this.load(data);
                }
            });
        } 
        this.panelLogic({ name: '', newVal: null, oldVal: null });
    }
   /**
     * 数据
     *
     *  @memberof BusinessSituation
     */  
    public data :any ={} ;

    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof BusinessSituation
     */
    @Prop() protected fetchAction!: string;

   /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof Mob
     */
    @Prop({ default: true }) protected showBusyIndicator?: boolean;

    /**
     * 接口实现
     *
     * @returns {any[]}
     * @memberof BusinessSituation
     */
    getDatas(): any[] {
        if (!this.item) {
            return [];
        }
        return [this.item];
    }
    getData() {
        return this.item;
    }

    /**
     * 面板数据对象
     *
     * @type {*}
     * @memberof BusinessSituation
     */
    @Prop() protected item?: any;


    /**
     * 数据加载
     *
     * @private
     * @param {*} [data={}]
     * @param {string} [type=""]
     * @returns {Promise<any>}
     * @memberof BusinessSituation
     */
    private async load(data: any = {}, type: string = ""): Promise<any> {
        const parentdata: any = {};
        this.$emit('beforeload', parentdata);
        Object.assign(data, parentdata);
        const response: any = await this.service.get(this.fetchAction, this.context, data, this.showBusyIndicator);
        if (!response || response.status !== 200) {
            this.$notify({ type: 'danger', message: response.info });
            return Promise.resolve(response);
        }
        this.$emit('load', (response.data && response.data.records) ? response.data.records : []);
        this.data = [];
        this.data = response.data.records;
        return Promise.resolve(response);
    }

    @Watch('item')
    public itemChange(){
         this.data = this.item;
    }


   /**
     * 表单逻辑
     *
     * @private
     * @param {{ name: string, newVal: any, oldVal: any }} { name, newVal, oldVal }
     * @memberof BusinessSituation
     */
    private panelLogic({ name, newVal, oldVal }: { name: string, newVal: any, oldVal: any }): void {
                


























    }

   /**
     * 详情模型集合
     *
     * @type {*}
     * @memberof BusinessSituation
     */
    protected detailsModel: any = {
        rawitem1: new PanelRawitemModel({ caption: '商户总数-图片', itemType: 'RAWITEM', name: 'rawitem1', panel: this, visible: true  })
, 
        merchantcnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'merchantcnt', panel: this, visible: true  })
, 
        rawitem8: new PanelRawitemModel({ caption: '商户总数', itemType: 'RAWITEM', name: 'rawitem8', panel: this, visible: true  })
, 
        container2: new PanelContainerModel({ caption: '商户总数', itemType: 'CONTAINER', name: 'container2', panel: this, visible: true  })
, 
        rawitem2: new PanelRawitemModel({ caption: '', itemType: 'RAWITEM', name: 'rawitem2', panel: this, visible: true  })
, 
        ordercnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'ordercnt', panel: this, visible: true  })
, 
        rawitem9: new PanelRawitemModel({ caption: '订单总数', itemType: 'RAWITEM', name: 'rawitem9', panel: this, visible: true  })
, 
        container3: new PanelContainerModel({ caption: '订单总数', itemType: 'CONTAINER', name: 'container3', panel: this, visible: true  })
, 
        rawitem3: new PanelRawitemModel({ caption: '', itemType: 'RAWITEM', name: 'rawitem3', panel: this, visible: true  })
, 
        compordercnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'compordercnt', panel: this, visible: true  })
, 
        rawitem10: new PanelRawitemModel({ caption: '已完成订单', itemType: 'RAWITEM', name: 'rawitem10', panel: this, visible: true  })
, 
        container4: new PanelContainerModel({ caption: '已完成订单', itemType: 'CONTAINER', name: 'container4', panel: this, visible: true  })
, 
        container1: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container1', panel: this, visible: true  })
, 
        campcnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'campcnt', panel: this, visible: true  })
, 
        rawitem4: new PanelRawitemModel({ caption: '', itemType: 'RAWITEM', name: 'rawitem4', panel: this, visible: true  })
, 
        container6: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container6', panel: this, visible: true  })
, 
        shopcnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'shopcnt', panel: this, visible: true  })
, 
        rawitem5: new PanelRawitemModel({ caption: '', itemType: 'RAWITEM', name: 'rawitem5', panel: this, visible: true  })
, 
        container7: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container7', panel: this, visible: true  })
, 
        experpointcnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'experpointcnt', panel: this, visible: true  })
, 
        rawitem6: new PanelRawitemModel({ caption: '体验点总数', itemType: 'RAWITEM', name: 'rawitem6', panel: this, visible: true  })
, 
        container8: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container8', panel: this, visible: true  })
, 
        selfpersoncnt: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'selfpersoncnt', panel: this, visible: true  })
, 
        rawitem7: new PanelRawitemModel({ caption: '', itemType: 'RAWITEM', name: 'rawitem7', panel: this, visible: true  })
, 
        container9: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container9', panel: this, visible: true  })
, 
        container5: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container5', panel: this, visible: true  })
, 
    };

    /**
     * 部件刷新
     *
     * @param {any[]} args
     * @memberof BusinessSituation
     */
    protected refresh(args: any[]): void {
        this.$emit('refresh',args);
    }

    /**
     * 计算面板按钮权限
     *
     * @param {any[]} args
     * @memberof BusinessSituation
     */
    protected computeButtonState() {
        const targetData = JSON.parse(JSON.stringify(this.data));
        if(this.detailsModel && Object.keys(this.detailsModel).length >0){
            Object.keys(this.detailsModel).forEach((name:any) =>{
                if(this.detailsModel[name] && this.detailsModel[name].uiaction && this.detailsModel[name].uiaction.dataaccaction && Object.is(this.detailsModel[name].itemType,"BUTTON")){
                    let tempUIAction:any = JSON.parse(JSON.stringify(this.detailsModel[name].uiaction));
                    this.$viewTool.calcActionItemAuthState(targetData,[tempUIAction], this.deUIService);
                    this.detailsModel[name].visible = tempUIAction.visabled;
                    this.detailsModel[name].disabled = tempUIAction.disabled;
                }
            })
        }
    }

}
</script>

<style lang='less'>
@import './business-situation-panel.less';
</style>

